<template>
  <view class="page">
    <view class="header">
      <view
        class="item"
        v-for="item in toggleBarList"
        :key="item.label"
        :class="{ active: item.label === currentToggleBarItem }"
        @click="
          () => {
            currentToggleBarItem = item.label
            resetPagination()
          }
        "
        >{{ item.label }}</view
      >
    </view>
    <view class="study-room-list" v-if="studyRoomList.length > 0">
      <view class="item" v-for="item in studyRoomList" :key="item.studyRoomId">
        <!--				默认图标-->
        <image class="icon" src="https://kou.gdzmtech.com/pic/Ja4mncQb5KrZXtvT9tjA.png" v-if="!item.studyRoomPic"></image>
        <!--				自定义图标-->
        <image class="icon" :src="getShowImage(item.studyRoomPic)" v-else></image>

        <view class="right">
          <view class="study-room-name">{{ item.studyRoomName }}</view>
          <view class="join-count">
            <text style="color: #a75b07">{{ item.currentOccupancy + item.virtualJoinCount }}</text>
            <text> 人自习中</text>
          </view>
          <!--					自习室状态-->
          <view class="status" v-if="item.studyStatus">
            <text v-if="item.studyStatus === 'Studying'">学习中</text>
          </view>
          <!--					自习室可用-->
          <view class="btn" v-if="item.studyRoomStatus === 'Available'" @click="() => getStudyRoomDetail(item)">进入</view>

          <view class="btn disabled" v-else-if="item.studyRoomStatus === 'Unavailable'" @click="() => getStudyRoomDetail(item)"
            >不可用</view
          >
        </view>
      </view>
      <uniLoadMore :status="loadMoreStatusText"></uniLoadMore>
    </view>
    <!-- 携带item自习室详情子组件和跳转别的页面 -->
    <enterToStudyRoom ref="enterToStudyRoom"></enterToStudyRoom>
  </view>
</template>

<script>
import request from "@/utils/request"
import { getShowImage, handleUrlParams } from "@/utils"
import enterToStudyRoom from "./components/enterToStudyRoom/studyroomdetail.vue"
export default {
  computed: {
    // appListRender() {
    //   return arrayUtils.toTwoDimensionalArray(this.appList, 5)
    // },
  },
  components: { enterToStudyRoom },
  data() {
    return {
      toggleBarList: [
        {
          label: "所有",
        },
        {
          label: "我的",
        },
        {
          label: "仅可用",
        },
      ],
      // 选中用的
      currentToggleBarItem: "所有",
      // 分页的
      pagination: {
        current: 1,
        size: 10,
      },
      // 列表的
      studyRoomList: [],
    }
  },
  // 获取活动列表
  onLoad() {},
  onShow() {
    this.resetPagination()
  },
  methods: {
    getShowImage,
    // 分页筛选加载和获取列表
    resetPagination() {
      return new Promise((resolve, reject) => {
        this.pagination.current = 1
        this.studyRoomList = []
        uni.showLoading({
          title: "加载中",
          mask: true,
        })
        this.getStudyRoomList().finally(() => {
          uni.hideLoading()
          resolve()
        })
      })
    },
    // 获取列表
    getStudyRoomList() {
      return new Promise((resolve, reject) => {
        if (this.loadMoreStatusText === "loading") {
          resolve()
          return
        }
        this.loadMoreStatusText = "loading"
        let studyRoomStatus //自习室状态（可用，不可用）
        let url //请求地址
        switch (this.currentToggleBarItem) {
          case "所有":
            studyRoomStatus = ""
            url = "studyRoom/listStudyRoom"
            break
          case "我的":
            studyRoomStatus = ""
            url = "studyRoom/myJoiningRoom"
            break
          case "仅可用":
            studyRoomStatus = "Available"
            url = "studyRoom/listStudyRoom"
            break
        }
        request({
          url,
          data: {
            ...this.pagination,
            studyRoomStatus,
          },
          errorHandle: true,
        }).then((data) => {
          this.studyRoomList.push(...data.records)
          //判断是否还有数据
          if (data.total <= this.studyRoomList.length) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
          resolve()
        })
      })
    },
    getStudyRoomDetail(item) {
      this.$refs.enterToStudyRoom.enterToStudyRoom(item.studyRoomId)
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  .header {
    display: flex;
    .item {
      margin-top: 30rpx;
      margin-right: 20rpx;
      padding: 10rpx 20rpx;
      border-radius: 32rpx;
      border: 2rpx solid var(--dark-border-color);
      font-size: 30rpx;
      &.active {
        background: var(--theme-color);
        color: white;
        border: 2rpx solid transparent;
      }
    }
  }
  .study-room-list {
    .item {
      margin-top: 30rpx;
      background: var(--background-color);
      box-shadow: 0 2px 6px 0 rgba(187, 187, 187, 0.5);
      border-radius: 20rpx;
      display: flex;
      padding: 20rpx;
      align-items: center;
      .icon {
        width: 216rpx;
        height: 204rpx;
      }
      .right {
        margin-left: 60rpx;
        .study-room-name {
          font-size: 32rpx;
        }
        .join-count {
          color: var(--text-color-light);
          font-size: 30rpx;
          margin-top: 14rpx;
        }
        > .status {
          margin-top: 14rpx;
          font-size: 30rpx;
          color: var(--theme-color);
        }
        .btn {
          background: var(--theme-color);
          padding: 10rpx 0;
          width: 172rpx;
          text-align: center;
          border-radius: 30rpx;
          color: white;
          font-size: 30rpx;
          margin-top: 20rpx;
          &.disabled {
            background: var(--dark-border-color);
          }
        }
      }
    }
  }
}
</style>
